<template>
    <!-- 面包屑导航 -->
    <div class="topNav">
        <el-breadcrumb :separator-icon="ArrowRight">
            <el-breadcrumb-item :to="{ name: 'base' }">仓库系统</el-breadcrumb-item>
            <el-breadcrumb-item>入库记录</el-breadcrumb-item>
        </el-breadcrumb>
    </div>

    <div class="together-content">
        <!-- 表单 -->
        <div class="search-form">
            <el-form :inline="true" label-width="60px" style="width: 100%">
                <el-form-item label="日期：" style="width: 250px">
                    <el-date-picker v-model="searchForm.date" type="date" placeholder="选择日期"
                        value-format="YYYY-MM-DD" />
                </el-form-item>

                <br />
                <br />
            </el-form>
        </div>

        <!-- 分割线 -->
        <el-divider style="margin: 10px 0" />

        <!-- 操作按钮 -->
        <div style="margin-bottom: 15px; text-align: right">
            <el-button type="primary" plain size="small">保存并提交</el-button>
            <el-button plain size="small">保存</el-button>
            <el-button plain type="info" size="small">审核</el-button>
            <el-button plain size="small">导出</el-button>
            <br />
        </div>
        <div style="text-align: left">
            <el-button plain type="success" size="small">开始盘点</el-button>
            <el-button plain type="danger" size="small">结束盘点</el-button>
        </div>
        <br />

        <!-- 表格 -->
        <el-table :data="detailList" style="width: 100%" border>
            <!-- 操作列 -->
            <el-table-column label="操作" width="80" align="center">
                <template #default="scope">
                    <!-- add -->
                    <el-button link type="success" size="small" plain @click="removeDetailRow(scope.$index)"><el-icon>
                            <Plus />
                        </el-icon></el-button>
                    <!-- del -->
                    <el-button link type="danger" size="small" plain @click="removeDetailRow(scope.$index)"><el-icon>
                            <Minus />
                        </el-icon></el-button>
                </template>
            </el-table-column>
            <!-- 商品编码 -->
            <el-table-column label="商品" width="120" align="center">
                <el-input readonly placeholder="选择商品" size="small"></el-input>
            </el-table-column>

            <!-- 商品名称 -->
            <el-table-column prop="goodsName" label="商品名称" width="160" align="center">
                <template #default="scope">
                    <div @click="selectGoods(scope.row, scope.$index)" class="clickable-cell">
                        {{ scope.row.goodsName || "—" }}
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="sourceWarehouseCode" label="仓库" width="160" align="center">
                <template #default="scope">
                    <el-input readonly size="small" placeholder="" style="width: 80%"
                        @click="openWarehouseView(scope.row)" />
                </template>
            </el-table-column>

            <!-- 系统库存 -->
            <el-table-column prop="systemGoodsNumber" label="系统库存" width="120" align="center">
                <template #default="scope">
                    <el-input v-model.number="scope.row.systemGoodsNumber" readonly size="small" style="width: 95%" />
                </template>
            </el-table-column>

            <!-- 实际库存 -->
            <el-table-column prop="realGoodsNumber" label="实际库存" width="120" align="center">
                <template #default="scope">
                    <el-input v-model.number="scope.row.realGoodsNumber" size="small" style="width: 95%" />
                </template>
            </el-table-column>

            <!-- 差异数量 -->
            <el-table-column prop="diffNumber" label="差异" width="120" align="center">
                <template #default="scope">
                    <span :class="{
                        'text-danger': scope.row.diffNumber < 0,
                        'text-success': scope.row.diffNumber > 0,
                    }">
                        {{ scope.row.diffNumber }}
                    </span>
                </template>
            </el-table-column>

            <!-- 原因 -->
            <el-table-column prop="reason" label="备注" width="200" align="center">
                <template #default="scope">
                    <el-input v-model="scope.row.reason" placeholder="" size="small" style="width: 95%" />
                </template>
            </el-table-column>


        </el-table><br/>
        <!-- 调拨单备注 -->
        <el-input style="width: 100%" type="textarea" placeholder="暂无备注信息" />

        <!--操作日志-->
        <div style="margin-bottom: 15px; text-align: right">
            <br />
            <el-button plain @click="router.push({ name: 'checkStock' })">历史记录</el-button>
            <el-button plain>操作日志</el-button>
        </div>

    </div>
</template>

<script setup>
import { ref, defineProps } from "vue";
import {useRouter} from 'vue-router'
let router = useRouter();
let searchForm = ref({});
let detailList = ref([
    {},
    {},
    {},
    {},
    {},
])
defineProps([
    "code"
])
</script>

<style></style>